let canvas = document.querySelector('.canvas');  
let ctx = canvas.getContext('2d');  
let isDrawing = false;  
let startPoint = { x: 0, y: 0 };  
let endPoint = { x: 0, y: 0 };  
let gradient;  
  
canvas.addEventListener('mousedown', (e) => {  
    isDrawing = true;  
    startPoint = { x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop };  
});  
  
canvas.addEventListener('mousemove', (e) => {  
    if (!isDrawing) return;  
    endPoint = { x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop };  
    drawLine();  
});  
  
canvas.addEventListener('mouseup', () => {  
    isDrawing = false;  
});  
  
function drawLine() {  
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布  
    ctx.beginPath(); // 开始路径绘制  
    ctx.moveTo(startPoint.x, startPoint.y); // 移动到起点  
    ctx.lineTo(endPoint.x, endPoint.y); // 绘制线条到终点  
    ctx.strokeStyle = 'transparent'; // 设置线条颜色为透明，这样可以看到渐变效果  
    ctx.lineWidth = 5; // 设置线条宽度为5px  
    ctx.stroke(); // 绘制线条并应用样式（透明）  
}